import React, { ReactEventHandler } from 'react';
import { omit } from '../utils/utility';
import Icon from './Icon';

interface IInputProps {
  disabled?: boolean; // 是否禁用
  type?: string;
  defaultValue?: string;
  value?: string;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
}

interface IProps {
  disabled?: boolean; // 是否禁用
  className?: string;
  size?: 'default' | 'small';
  type?: string;
  defaultValue?: string;
  value?: string;
  afterIconType?: string;
  placeholder?: string;
  // addonBefore?: string | React.ReactNode;
  // enterButton?: boolean;
  // onPressEnter?: React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
  // onSearch?: (value: string, e: React.KeyboardEvent<HTMLInputElement>) => void;

  onChange?: React.FocusEventHandler<HTMLInputElement>;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
}

export default class Input extends React.Component<IProps, {}> {

  public static defaltProps = {
    type: 'text',
    size: 'default',
    disabled: false,
    enterButton: false,
  };

  // public input = React.createRef();
  public input: HTMLInputElement | null = null;

  constructor(props: IProps) {
    super(props);
    // this.onChange = this.onChange.bind(this);
    // this.onKeyDown = this.onKeyDown.bind(this);
    this.saveInput = this.saveInput.bind(this);
    this.renderAddonAfter = this.renderAddonAfter.bind(this);
    this.onIconClick = this.onIconClick.bind(this);
    // this.renderAddonBefore = this.renderAddonBefore.bind(this);
  }
  // public onChange(e: any) {
  // console.log('input change', (e.target as any).value);
  // console.log('input change', e.target.value);
  // }

  // public onKeyDown(e: any) {
  // console.log('input change', (e.target as any).value);
  // console.log('input onKeyDown', e.target.value);
  // }

  public saveInput(node: HTMLInputElement) {
    this.input = node;
  }

  public onIconClick() {
    if (this.input) {
      (this.input as any).focus();
    }
  }

  public fixInputValue <T>(value: T) {
    if (typeof value === 'undefined' || value === null) {
      return '';
    }
    return value;
  }

  public renderAddonAfter() {
    if (!this.props.afterIconType) {
      return null;
    }
    const className = this.props.size === 'small' ? 'input-sm-after-icon' : '';
    return (
      <div className={`input-after-icon ${className}`} onClick={this.onIconClick}>
        <Icon type={this.props.afterIconType} color="#989898" size={14}></Icon>
      </div>
    );
  }

  // public renderAddonBefore() {
  //   if (!this.props.addonBefore) {
  //     return null;
  //   }
  //   return (
  //     <div className="float-left">
  //       <Icon type="close-solid" color="#e72d3a" size={14}></Icon>
  //     </div>
  //   );
  // }

  public render() {
    const { value } = this.props;
    let classString = '';
    const className = this.props.className || '';
    const sizeClassName = this.props.size === 'small' ? 'input-sm' : '';
    if (this.props.disabled) {
      classString = `input input-disabled ${className} ${sizeClassName}`; // 禁用的样式
    } else {
      classString = `input ${className} ${sizeClassName}`;
    }

    const otherProps: IInputProps = omit(this.props, [
      'afterIconType',
      'className',
      'size',
    ]);

    if ('value' in this.props) {
      otherProps.value = this.fixInputValue(value);
      delete otherProps.defaultValue;
    }

    return (
      <div className="input-box">
        <input
          {...otherProps}
          className={classString}
          ref={this.saveInput}
        />
        {this.renderAddonAfter()}
      </div>
    );
  }
}
